<style lang="less">
  @import '../styles/menu.less';
</style>

<template>
  <div>
    <MenuItem v-if="!menuItem.children" :name="menuItem.name" :key="'menuitem' + menuItem.name">
      <Icon :type="menuItem.icon" :size="iconSize" :key="'menuicon' + menuItem.name"></Icon>
      <span class="layout-text" :key="'title' + menuItem.name">{{ itemTitle(menuItem) }}</span>
    </MenuItem>
    <Submenu v-if="menuItem.children && menuItem.children.length > 0" :name="menuItem.name" :key="menuItem.name">
      <template slot="title">
        <Icon :type="menuItem.icon" :size="iconSize"></Icon>
        <span class="layout-text">{{ itemTitle(menuItem) }}</span>
      </template>
      <template v-for="child in menuItem.children">
        <sidebar-menu-item :menuItem="child"></sidebar-menu-item>
      </template>
    </Submenu>
  </div>
</template>

<script>
  export default {
    name: 'sidebarMenuItem',
    props: {
      menuItem: Object,
      iconSize: Number
    },
    methods: {
      changeMenu (active) {
        this.$emit('on-change', active);
      },
      itemTitle (item) {
        if (typeof item.title === 'object') {
          return this.$t(item.title.i18n);
        } else {
          return item.title;
        }
      }
    },
    updated () {
      this.$nextTick(() => {
        if (this.$refs.sideMenu) {
          this.$refs.sideMenu.updateOpened();
        }
      });
    }

  };
</script>
